<template>
    <div>
        <Modal width="660"
               v-model="modal"
               draggable
               scrollable
               @on-ok="ok"
               @on-cancel="cancel"
               :loading="loading"
               title="图片上传">
        <Row>
            <i-col span="12">
                <Card style="width: 625px;height: 378px">
                    <div class="cropper-example cropper-first">
                        <cropper
                                :src="exampleImageSrc"
                                crop-button-text="确认提交"
                                @on-crop="handleCroped"
                        ></cropper>
                    </div>
                </Card>
            </i-col>
        </Row>
        </Modal>
    </div>
</template>

<script>
    import Cropper from '@/components/cropper'
    export default {
        name: 'cropper_page',
        components: {
            Cropper
        },
        props:{
            cropperFlag:false
        },
        data () {
            return {
                modal:false,
                loading:false,
                exampleImageSrc: '',
            }
        },
        methods: {
            ok(){
                this.$parent.cropperFlag = false
            },
            cancel(){
                this.$parent.cropperFlag = false
            },
            handleCroped (blob) {
                let files = new window.File([blob], `${(new Date()).getTime()}.png`)
                this.$parent.cropperFlag = false
                this.$emit("getfile",files)
            }
        },watch:{
            cropperFlag(falg){
                this.modal = falg?true:false
            }
        }
    }
</script>

<style lang="less">
    .cropper-example{
        height: 400px;
    }
</style>
